<template>
  <div class="digit-verify">
      <input type="text"
        :value="value"
        v-bind="$attrs"
        @compositionstart="handleCompositionStart"
        @compositionupdate="handleCompositionUpdate"
        @compositionend="handleCompositionEnd"
        @input="onInput" />
      <hr>
      <div>
        <h3>
        解决中文输入法，快速输入出现$event.data为null，导致的问题: 事件compositionstart、compositionend是关键
        </h3>
        <h4>使用一个变量表示拼写状态，在oninput事件中判断是否在拼写状态，当拼写状态结束，继续执行下一步操作</h4>
        <h5>即在中文(准确说是在非英文)状态下，通过一个变量控制是否触发input事件所对应(绑定)的函数，只有当一个单词(一段文字)输入完成或取消时才实际触发input事件所对应(绑定)的函数</h5>
      </div>
  </div>
</template>

<script>

export default {
  inheritAttrs: false,
  name: 'DigitVerify',
  props: {
    value: [String, Number]
  },
  data () {
    return {
      isComposing: false
    }
  },
  methods: {
    onInput ($event) {
      if (this.isComposing) return
      this.$emit('input', $event.target.value)
      this.$nextTick(() => {
        $event.target.value = this.value === null || this.value === undefined ? '' : String(this.value)
      })
    },
    handleCompositionStart () {
      this.isComposing = true
    },
    handleCompositionUpdate ($event) {
    },
    handleCompositionEnd ($event) {
      if (this.isComposing) {
        this.isComposing = false
        this.onInput($event)
      }
    }
  }
}
</script>
